<template>
  <div>
    <div class="header">
      <h6>部门管理</h6>
      <el-button type="primary" round @click="dialogVisible1 = true"
      >+ 新增部门
      </el-button>
    </div>
    <el-table
        :data="tableData"
        style="width: 100%"
        :header-row-style="
        () => {
          return 'line-height:50px';
        }
      "
    >
      <el-table-column prop="id" label="序号" width="180px"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180px">
      </el-table-column>
      <el-table-column label="入职时间" width="180px" center>
        <template v-slot="scope">
          {{ $moment(scope.row.createTime).format('L') }}
        </template>
      </el-table-column>
      <el-table-column label="更改时间" width="180px">
        <template v-slot="scope">
          {{ $moment(scope.row.updateTime).format('L') }}
        </template>
      </el-table-column>

      <el-table-column align="right">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
        title="编辑部门"
        :visible.sync="dialogVisible"
        width="30%"
        center
    >
      <span>
        <el-form label-width="80px" :model="formLabelAlign">
          <el-form-item label="部门名称">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateDept">保存</el-button>
      </span>
    </el-dialog>

    <el-dialog
        title="新增部门"
        :visible.sync="dialogVisible1"
        width="30%"
    >
      <span>
        <el-form label-width="80px" :model="formLabelAlign">
          <el-form-item label="部门名称">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="addDept">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '../utils/request';

export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      dialogVisible1: false,
      formLabelAlign: {},
      row: {},
      currentPage: 1,
      total: 0,
      pageSize: 0,
      chagecurrentPage: '',
      chagepageSize: '',
    };
  },
  methods: {
    handleEdit(index, row) {
      this.dialogVisible = true;
      this.row = row;
    },
    handleDelete(index, row) {
      console.log(index, row.id);
      let ids = [];
      ids.push(row.id);
      console.log('ids', ids);

      this.$confirm('永久删除该员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            console.log('删除成功', this);
            request
                .delete(`dept/delete?ids=${ids}`)
                .then((data) => {
                  console.log(data);
                  this.$message({
                    type: 'success',
                    message: '删除成功!',
                  });
                  this.getData();
                })
                .catch((error) => {
                  console.error(error);
                  this.$message.error('删除失败');
                });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            });
          });
    },
    updateDept() {
      this.dialogVisible = false;
      console.log(this.row.id);
      console.log(this.formLabelAlign.name);
      request
          .put('dept/update', {
            id: this.row.id,
            name: this.formLabelAlign.name,
          })
          .then((data) => {
            console.log(data.data);
            this.$message({
              message: '恭喜你，更新成功',
              type: 'success',
            });
            this.formLabelAlign.name = '';
            this.getData();
          })
          .catch((error) => {
            console.error(error);
            this.$message.error('更新失败');
          });
    },
    getData() {
      request
          .get(
              `dept/depts?currentPage=${this.chagecurrentPage}&pageSize=${this.chagepageSize}`
          )
          .then((data) => {
            console.log(data.data.data);
            this.tableData = data.data.data.list;
            this.total = data.data.data.total;
            this.pageSize = data.data.data.pageSize;
          })
          .catch((error) => {
            console.error(error);
          });
    },
    addDept() {
      this.dialogVisible1 = false;
      request
          .post('dept/add', {
            name: this.formLabelAlign.name,
          })
          .then((data) => {
            console.log(data);
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
            });
            this.getData();
            this.formLabelAlign.name = '';
          })
          .catch((error) => {
            console.error(error);
            this.$notify.error({
              title: '错误',
              message: '添加失败',
            });
          });
    },
    handleSizeChange(pageSize) {
      console.log(`每页 ${pageSize} 条`);
      this.chagepageSize = pageSize;
      this.getData();
    },
    handleCurrentChange(currentPage) {
      console.log(`当前页: ${currentPage}`);
      this.chagecurrentPage = currentPage;
      this.getData();
    },
  },
  mounted() {
    // console.log('axios', this.axios);
    // console.log('moment', this.$moment);
    this.getData();
  },
};
</script>

<style scoped>
.block {
  float: right;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.header {
  height: 200px;
  float: left;
  margin-bottom: 0;
}

.header h6 {
  height: 50px;
  margin: 0;
  padding: 0;
  border: 0;
}
</style>
